<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>bui-ssm快速开发框架</title>
    <head th:include="source::header"></head>
    <style>
			body {
				position: relative;
			}
			
			body > div {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
			div#main_body div:first-child {
				border-right: none;
			}
			#_alert_message_wrap{
				
				height: 25px;
				
				position: absolute;
				left:350px;
				bottom: 6px;
			}
			#_alert_message_wrap > span{padding:0 12px;line-height: 22px;cursor: pointer;color: #fff;}
			#_alert_message_wrap ._num_{ color:red;}
    </style>
</head>
<body>
<div id="header">
    <h5><div class="header_logo"></div>bui-ssm快速开发框架 v-0.0.1</h5>
    <div id="_alert_message_wrap">
    	<span>代办 <span class='_num_'>2</span></span>
    	<span>告警 <span  class='_num_'>5</span></span>
    	<span>通知 <span  class='_num_'>8</span></span>
    </div>
    <div id="theme_ops">
    	<a id='index'>风格1</a> <a id='index2'>风格2</a> <a id='index3'>风格3</a>
    </div>
    
    <div id="user_info">
    	<span><i style="padding-right:6px;font-size:1.5em;color:#fff;" class='fa fa-user-circle-o'></i></span>
    	<span class="_user_name">[(${loginUser})]</span>
    </div>
    <div id="logout" th:title="${Lang.common_logout}">
    	<i class="fa fa-logout-1"></i>
    </div>
</div>
<div id="main_body" class="k_box_size">
	

</div>
</body>
<script type="application/javascript">
    function pageLoaded() {
    	var themeIndex = '[(${themeIndex})]';
    	var allOps = $("#theme_ops").children("a").click(function(){
    		$(this).addClass("actived").siblings().removeClass("actived");
    		window.location.href = $B.getHttpHost(ctxPath)+"main/page/"+$(this).attr("id");
    	}).each(function(){
    		var $t = $(this);
    		if($t.attr("id") === themeIndex){
    			$t.addClass("actived").siblings().removeClass("actived");
    		}
    	});
    	
    	
    	$("#user_info").children("._user_name").dropDownList([
    		{
    			text:'个人信息',
    			icon:'fa-address-card-o',
    			click:function(){
    				alert("个人信息");
    			}
    		},{
    			text:'修改密码',
    			icon:'fa-lock',
    			click:function(){
    				alert("修改密码");
    			}
    		},{
    			text:'系统配置',
    			icon:'fa-cog-alt',
    			click:function(){
    				alert("fa-gear");
    			}
    		}
    	]);
    	var menuJson = [(${menuJson})];
    	var currentActived;    	
		var itemsAcc = [];
		var $tab;
		var ulArray = [];
    	for(var i = 0, len = menuJson.length ; i < len ;++i){
    		var ul = $("<ul/>");
    		ulArray.push(ul);
    		itemsAcc.push({
                name: menuJson[i].text,
                icon: menuJson[i].data.menuIconCss,
                content: ul
            });
    		if(menuJson[i].children){
                var treeObj = new $B.Tree(ul, {
                    data: menuJson[i].children, //'数据'
                    checkbox: false,
                    fontIconColor: '#5F52E3',
                    nodeParentIcon: 'fa-folder-empty', //父节点图标关闭状态
                    nodeParentOpenIcon: 'fa-folder-open-empty', //打开状态图标
                    leafNodeIcon: 'fa-doc', //子节点图标 
                    onClick: function (data, params) { //function (data) { },//点击事件
                    	var el = this.children();
                    	var menuData = el.data("data");
                    	var _data =  menuData.data;
                    	if(_data.isLeaf === 1){
                    		if(currentActived){
                    			currentActived.children("div").removeClass("k_tree_clicked_cls");
                    		}
                    		currentActived = this; // _data;                    		
                        	var url = $B.getHttpHost(ctxPath) + _data.controller+"/page/"+_data.pageName ;
                        	if(_data.params && _data.params !== ""){
                        		url = url + "?"+ _data.params;
                        	}
                            $tab.add({
                                title: _data.menuText,
                                iconCls: _data.menuIconCss,
                                data:{id:menuData.id},
                                closeable: true,
                                url: url
                            });
                    	}
                    }
                });
    		}
    	}
    	
    	if(itemsAcc.length > 0){
            var accordion = $("<div id='memu_accordion'></div>");
            var layout = new $B.Layout($("#main_body"), {
                onCreated: function (params) { //function(){} 布局创建完成事件,
                    console.log("onCreated " + JSON.stringify(params));
                    if(params.i === 1){
                    	 $tab = new $B.Tab($("#_tab"), {
                    		 tabCount:10,//限制只能打开6个tab
                             cxtmenu: true, //右键菜单
                             onLoaded: function (title) { //加载后                                 
                             },
                             onClosed: function (title) {                                 
                            	 var actLi = $tab.getActived();
                            	 var newData = actLi.data("itdata");
                            	 currentActived.children("div").removeClass("k_tree_clicked_cls");
                            	 for(var k = 0 ,klen = ulArray.length ; k < klen ;++k){
                          			var activedLi = ulArray[k].find("#"+newData.id);
                          			if(activedLi.length > 0){
                          				activedLi.children("div").addClass("k_tree_clicked_cls");
                         				currentActived = activedLi;
                         				break;
                          			}
                          		 }
                             },
                             onClick: function (title,data) {                             	
                             	var curData = currentActived.children("div").data("data");
                             	if(curData && curData.id !== data.id){
                             		for(var k = 0 ,klen = ulArray.length ; k < klen ;++k){
                             			var activedLi = ulArray[k].find("#"+data.id);
                             			if(activedLi.length > 0){
                             				currentActived.children("div").removeClass("k_tree_clicked_cls");
                             				activedLi.children("div").addClass("k_tree_clicked_cls");
                             				currentActived = activedLi;
                             				break;
                             			}
                             		}
                             	}
                             	if(data.id === 0){
                             		currentActived.children("div").removeClass("k_tree_clicked_cls");
                             	}
                             },
                             tabs:[{
                             	  title: '首页',
                                  iconCls: 'fa-mail',
                                  data:{id:0},
                                  closeable: false,
                                  actived: true,
                                  url:$B.getHttpHost(ctxPath)+"personal/page/index"
                             }]
                         });             
                    }                      
                },
                onLoaded: function (data, params) { //加载完成
                    //console.log("onLoaded data = " + JSON.stringify(data) + " params=" + JSON.stringify(params));
                },
                items: [ //参考items说明
                    {
                        width: 230,
                        title: '系统面板', //标题
                        expandable: true,
                        iconCls: 'fa-cog-alt', //样式
                        content: accordion
                    }, {
                        header: false, //是否需要标题栏
                        iconCls: 'fa-file-code',
                        width: 'auto', //宽度
                        title: '页面模块',
                        content:'<div style="width:100%;height:100%" class="k_box_size" id="_tab"></div>'
                        /* bodyCss:{"padding":"10px 10px"} */
                    }
                ]
            });
            //创建菜单项目
            var opts = {
                iconCls: 'fa-angle-double-right', //收起图标
                iconClsAct: 'fa-angle-double-down', //展开图标
                iconPositon: 'right', //图标位置
                iconColor: '#939393', //图标颜色
                onOpened: function (name) {
                	//currentActivedText = this.prev().text();
                    //this.children("ul").children("li").first().trigger("click");
                    this.children("ul").data("treeIns").setRootUlWidth();
                },
                accordionStyle: {
                    "background": "#FCFCFC",
                    "border": "1px solid #C5C5C5",
                    "border-right": "none",
                    "border-left": "none"
                },
                items: itemsAcc
            };
            accordion = new $B.Accordion(accordion, opts);
    	}else{
    		$B.error({
    			message:'尚未登录或无访问权限!' ,
    			timeout:3,
    			onClosed:function(){
    				window.location.href = $B.getHttpHost(ctxPath)+"main/page/login";
    			}
    		});	
    	}        
        $("#logout").click(function(){
        	  $B.confirm({                  
                  message: '请确认退出系统？',
                  okFn: function () {
                  	var win = $B.message("正在退出......");
        			$B.request({
        				url:$B.getHttpHost(ctxPath)+"main/logout",
        				data:{},
        				ok:function(msg,data){					
        					window.location.href = $B.getHttpHost(ctxPath)+"main/page/login";
        				},
        				final:function(){
        					win.close();
        				}
        			});
                  }
              });
        });
    };
    $(function () {
        pageLoaded();
    });
</script>
</html>